import React from 'react'
import './index.less'
import CommonHeader from 'COMPONENT/CommonHeader';
import RoomType from 'COMPONENT/RoomType';
import { Radio, Button, WhiteSpace, List, DatePicker } from 'antd-mobile';
import PropTypes from 'prop-types';
// ========================================
const RadioItem = Radio.RadioItem;
const Item = List.Item;
// ========================================
class HmdMain extends React.Component { 
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props){ 
        super(props);
        this.state={ 
            itemData:[
                {code:'835235827419356354332',type:'信用贷'},
                {code:'835235827419356354332',type:'房抵贷'},
                {code:'835235827419356354332',type:'信用贷'},
                {code:'835235827419356354332',type:'信用贷'},
                {code:'835235827419356354332',type:'信用贷'},
                {code:'835235827419356354332',type:'房抵贷'},
            ],
            filters: [
                { title: '贷款种类' },
                { title: '贷款状态' },
                { title: '起止时间' }
            ],
            dates: [
                { value: 0, label: '开始时间', type: 'startDate' },
                { value: 1, label: '结束时间', type: 'endDate' },
            ],
            activeNum: '',
            dkType: [
                { value: 0, label: '全部' },
                { value: 1, label: '房抵贷' },
                { value: 2, label: '信用贷' }
            ],
            dkTypeValue: 0,
            dkState: [
                { value: 0, label: '已发放' },
                { value: 1, label: '已入账' },
                { value: 2, label: '结清' }
            ],
            dkStateValue: 0
        }
    }
    btnClick=()=>{ 
        this.context.router.push({
			pathname: '/Mine'
        })
    }
    detail=(item)=>{ 
        let url;
        if(item.type=='房抵贷'){ 
            url='/MineLoan/MineCreditLoan';
        }else if(item.type=='信用贷'){ 
            url='/MineLoan/MineLoanDetail';
        }
        this.context.router.push({
			pathname: url,
        })
    }
    // 点击筛选项
    filterClickFun = (index) => {
        let activeNum;
        if (index === this.state.activeNum) {
            activeNum = '';
        } else {
            activeNum = index;
        }
        this.setState({
            activeNum
        });
    };
    // 贷款种类
    dkTypeFun = (val) => {
        this.setState({
            dkTypeValue: val
        });
    };
    // 贷款状态
    dkStateFun = (val) => {
        this.setState({
            dkStateValue: val
        });
    };
    // 隐藏筛选
    filterShadowFun = () => {
        this.setState({
            activeNum: ''
        });
    };
    render() {
        let that = this;
        let itemData = this.state.itemData;
        let dkType = this.state.dkType;
        let dkState = this.state.dkState;
        // filter
        let filters = this.state.filters;
        let filterHeight = window.screen.height - 45 - 34;
        let filterIsShow = this.state.activeNum === '' ? 'none' : 'block';
        // 起止时间
        let dates = this.state.dates;
        return (
            <div className="mine_loan">
           		<CommonHeader 
					name='我的贷款'					
					leftContentTitle="@back" 
					leftContent='返回'
				/>
				<div style={{height:'.9rem'}}></div>
                <div id="filterBox">
                    {
                        filters.map((item, index) => {
                            return (
                                <div className={`filter-type ${this.state.activeNum === index ? 'filter-type-active' : ''}`}
                                     onClick={this.filterClickFun.bind(this, index)}>
                                    {item.title}
                                    <span></span>
                                </div>
                            )
                        })
                    }
                    <div className="filter-main" style={{height: filterHeight + 'px', display: filterIsShow}}>
                        <div className="filter-content">
                            {/*贷款种类*/}
                            {
                                this.state.activeNum === 0 ? (
                                    <List>
                                        {
                                            dkType.map(item => (
                                                <RadioItem key={item.value} checked={that.state.dkTypeValue === item.value}
                                                           onChange={() => {that.dkTypeFun(item.value)}}>
                                                    {item.label}
                                                </RadioItem>
                                            ))
                                        }
                                    </List>
                                ) : ''
                            }
                            {/*贷款状态*/}
                            {
                                this.state.activeNum === 1 ? (
                                    <List>
                                        {
                                            dkState.map(item => (
                                                <RadioItem key={item.value} checked={that.state.dkStateValue === item.value}
                                                           onChange={() => {that.dkStateFun(item.value)}}>
                                                    {item.label}
                                                </RadioItem>
                                            ))
                                        }
                                    </List>
                                ) : ''
                            }
                            {/*起止时间*/}
                            {
                                this.state.activeNum === 2 ? (
                                    dates.map((item) => {
                                        return (
                                            <DatePicker
                                                mode="date"
                                                title={item.label}
                                                extra={item.label}
                                                value={this.state[item.type]}
                                                onChange={date => this.setState({ [item.type]: date })}
                                            >
                                                <Item arrow="horizontal">{item.label}</Item>
                                            </DatePicker>
                                        )
                                    })
                                ) : ''
                            }
                        </div>
                        {/*背景阴影*/}
                        {
                            this.state.activeNum === '' ? '' : (<div className="filter-main-shadow" onClick={this.filterShadowFun}></div>)
                        }
                    </div>
                </div>
                <div className="hmd_apply_middle">
                    <div className="hmd_apply_middle_info">
                        <div className="hmd_apply_middle_info_down">
                            {itemData.map(item=>( 
                                <div> 
                                    <span>{item.type}({item.code})</span>
                                    <span  className="span_last" onClick={this.detail.bind(this,item)}>查看详情</span>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <WhiteSpace size="lg" />
                <div className="btnGroup-one">
                    <Button type="primary" className="btnGroup-one-btn"
                            onClick={this.btnClick}>返回</Button>
                </div>

            </div>
        );
    }
}
// ========================================
export default HmdMain;